<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- v-bind指令用来给标签的【属性】绑定动态数据 -->
        <h1 id="h1Id" class="box" v-bind:title="tit">这是个大大的h1</h1>
        <!-- 简略写法 英文的： -->
        <h1 :title="tit">一级标题</h1>
        <!-- 拼接 -->
        <h1 :title="tit+'拼接'">一级标题</h1>

        <img :src="imgUrl" alt="">
    </div>

</body>

</html>
<script src="js/vue3.4.21.js"></script>
<script>
    const {
        createApp,
        ref
    } = Vue

    createApp({
        setup() {
            const tit = ref('一级标题绑定')
            const imgUrl = ref('img/t013802da1d52f94f60.jpg')
            return {
                tit,
                imgUrl
            }
        }
    }).mount('#app')
</script>